<nz-card [nzSize]="'small'">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm" (ngSubmit)="submitSearch()">
        <nz-form-item>
            <nz-form-label [nzFor]="'name'">租户名称</nz-form-label>
            <nz-form-control>
                <input nz-input placeholder="账号" [formControlName]="'name'" [attr.id]="'name'" autocomplete="off" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <button nz-button nzType="primary">搜索</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-card>

<nz-card [nzSize]="'small'">
    <form nz-form [nzLayout]="'inline'">
        <nz-form-item>
            <nz-form-label [nzFor]="'name'">排序</nz-form-label>
            <nz-radio-group [nzButtonStyle]="'solid'" name="sort" [(ngModel)]="sortkey"
                (ngModelChange)="sorkKeyChange()">
                <label nz-radio-button nzValue="CreatedTime" (click)="radioClick($event)">创建日期
                    <span *ngIf="sortkey==='CreatedTime'">
                        <i *ngIf="!isdesc" nz-icon nzType="arrow-up" nzTheme="outline"></i>
                        <i *ngIf="isdesc" nz-icon nzType="arrow-down" nzTheme="outline"></i>
                    </span>
                </label>
            </nz-radio-group>
        </nz-form-item>
    </form>
</nz-card>

<nz-card [nzSize]="'small'" class="full-triple">
    <div>
        <button nz-button class="mr-10" (click)="refresh()"><i nz-icon nzType="sync"></i>刷新数据</button>
    </div>
    <div class="mt-10">
        <nz-table #dataTable nzSize="middle" [nzData]="data" nzShowPagination="false" nzFrontPagination="false"
            nzBordered="true">
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="50px">#</th>
                    <th nzAlign="center" nzWidth="150px">名称</th>
                    <th nzAlign="center">Schema</th>
                    <th nzAlign="center" nzWidth="90px">激活状态</th>
                    <th nzAlign="center" nzWidth="180px">创建日期</th>
                    <th nzAlign="center" nzWidth="120px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of dataTable.data;let i = index">
                    <td nzAlign="center">{{ i + 1 + (page - 1) * size }}</td>
                    <td nzAlign="center">{{ data.name }}</td>
                    <td nzAlign="center">{{ data.schema }}</td>
                    <td nzAlign="center">
                        <nz-tag *ngIf="!data.isActive" [nzColor]="'red'">停用</nz-tag>
                        <nz-tag *ngIf="data.isActive" [nzColor]="'green'">激活</nz-tag>
                    </td>
                    <td nzAlign="center">{{ data.createdTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
                    <td nzAlign="center">
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
    <div class="mt-10">
        <nz-pagination [(nzPageSize)]="size" [(nzPageIndex)]="page" [nzTotal]="total" nzShowSizeChanger
            nzShowQuickJumper (nzPageIndexChange)="pageChange()" (nzPageSizeChange)="sizeChange()"></nz-pagination>
    </div>
</nz-card>